<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<center id="app">
    <h3>阿里云员工列表 <a th:href="@{/}">回首页</a></h3>
    <table border="1">
        <tr>
            <th>编号</th>
            <th>员工姓名</th>
            <th>员工年龄</th>
            <th>员工性别</th>
            <th>员工email</th>
            <th>操作</th>
        </tr>

        <tr th:each="employee,status : ${page.list}">
            <td th:text="${status.count}"></td>
            <td th:text="${employee.empName}"></td>
            <td th:text="${employee.age}"></td>
            <td th:text="${employee.gender}"></td>
            <td th:text="${employee.email}"></td>
            <td>
                <a th:href="@{'/update/'+${employee.empId}}">修改</a>
                <a @click="deleteEmployee" th:href="@{'/employee/'+${employee.empId}}">删除</a>
            </td>
        </tr>
        <tr>
            <td colspan="6" align="center">
                <span th:if="${page.hasPreviousPage}">
                    <a th:href="@{/employee/1}">首页</a>
                    <a th:href="@{'/employee/'+${page.prePage}}">上一页</a>
                </span>
                <span th:each="num:${page.navigatepageNums}">
                    <a th:if="${page.pageNum==num}" th:href="@{'/employee/'+${num}}" th:text="'['+${num}+']'" style="color:red;"></a>
                    <a th:if="${page.pageNum!=num}" th:href="@{'/employee/'+${num}}" th:text="${num}"></a>
                </span>
                <span th:if="${page.hasNextPage}">
                    <a th:href="@{'/employee/'+${page.nextPage}}">下一页</a>
                    <a th:href="@{'/employee/'+${page.pages}}">末页</a>
                </span>
            </td>
        </tr>
    </table>
    <form method="post">
        <input type="hidden" name="_method" th:value="delete">
    </form>
</center>
<script th:src="@{/static/js/vue.js}"></script>
<script>
    var vm=new Vue({
        el:"#app",
        methods:{
            deleteEmployee(){
                console.log(event.target.href);
                let _href=event.target.href
                let form=document.getElementsByTagName("form")[0];
                form.action=_href

                var msg = "您真的确定要删除吗？\n\n请确认！";
                if (confirm(msg)==true){
                    form.submit();
                    event.preventDefault();
                    return true;
                }else{
                    return false;
                }


            }
        }
    })
</script>
</body>
</html>